<template>
  <div>
    <div class="mlt" style="margin-bottom: 10px">
      <h2>调整单号：{{ pdata.order_sn }} 日期：{{ pdata.created_at }}</h2>
      <el-button @click="addgoods">添加</el-button>
      <el-button @click="SubmitGoods">保存</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>

    <table class="tftable">
      <thead>
        <tr>
          <td>商品名称</td>
          <td>规格名称</td>
          <td>商品进货价</td>
          <td>商品原价格</td>
          <td>商品调整价格</td>
          <!-- <td>备注</td> -->
          <td>操作</td>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.goods_name }}</td>
          <td>{{ item.attr_name }}</td>
          <td>{{ item.supply_price }}</td>
          <td>{{ item.cost_price }}</td>
          <td style="width: 200px">
            <el-input
              v-model="item.change_cost_price"
              oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
            />
          </td>
          <td>
            <el-button type="text" @click="delGoods(index)">删除</el-button>
          </td>
        </tr>
      </tbody>
    </table>
    <el-dialog
      :before-close="handleClose"
      title="商品"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div>
        <div style="display: flex; margin-bottom: 15px">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width: 50%"
          />
          <el-button>搜索</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData1"
          style="width: 100%"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            :selectable="selectEnable"
            type="selection"
            width="55"
          />

          <el-table-column label="商品名称" prop="goods_name" />
          <el-table-column label="规格名称" prop="attr_name" />
          <el-table-column label="商品价格" prop="cost_price" />
          <el-table-column label="供货价格" prop="supply_price" />
        </el-table>
        <el-pagination
          v-if="total >= 10"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getGoodsIn, costItemAdd, costDetail } from '@/api/commodity'

  export default {
    props: {
      pdata: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        tableData: [],
        dialogVisible: false,
        tableData1: [],
        input: '',
        page: 1,
        total: '',
      }
    },
    watch: {},
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.goodsList()
        const data = {
          id: this.pdata.id,
        }
        costDetail(data).then((e) => {
          this.tableData = e.data.item
        })
      },
      goodsList() {
        const parmas = {
          pagesize: 10,
          page: this.page,
        }
        getGoodsIn(parmas).then((res) => {
          this.tableData1 = res.data.data
          this.total = res.data.total
        })
      },
      // 提交
      Submit() {
        this.dialogVisible = false
        this.tableData = this.multipleSelection
      },
      addgoods() {
        this.dialogVisible = true

        this.$refs.multipleTable.clearSelection()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      delGoods(index) {
        this.tableData.splice(index, 1)
      },
      SubmitGoods() {
        const obj = []
        this.tableData.forEach((e) => {
          obj.push({
            id: e.id,
            in_item_id: e.id,
            goods_id: e.goods_id,
            goods_name: e.goods_name,
            attr_id: e.attr_id,
            attr_name: e.attr_name,
            original_cost_price: e.cost_price,
            change_cost_price: e.change_cost_price,
          })
        })
        const data = {
          item_data: JSON.stringify(obj),
          cost_id: this.pdata.id,
        }
        costItemAdd(data).then(() => {
          this.goBack()
        })
      },
      // 多选禁用
      selectEnable(row) {
        if (this.tableData.some((item) => item.id === row.id)) {
          return false
        } else {
          return true // 不禁用
        }
      },
      handleCurrentChange(val) {
        const _this = this
        _this.page = val
        this.goodsList()
      },
      // 弹框的回调
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
      goBack() {
        this.$emit('showMain', 0)
      },
    },
  }
</script>

<style scoped>
  table.tftable,
  table.table-count {
    font-size: 12px;
    color: #333333;
    width: 100%;
    border-width: 1px;
    /* border-collapse: unset; */
    border-spacing: 0;
    border-collapse: unset (collapse/separate);
  }

  table.table-count th,
  table.table-count td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: center;
  }

  table.tftable th,
  table.tftable td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: left;
    text-align: center;
  }

  .tftable {
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  table.tftable tr:hover {
    background: #c3ecff;
  }
  .tftable > thead > tr:hover {
    background: white;
  }
</style>
